<template>
  <div class="playListDetailContainer">
    <a-row>
      <a-col :span="24">
        <div class="playListDetailInfo">
          <a-row>
            <a-col :span="24" style="position: relative">
              <div style="display: inline-block;border: 1px red solid;padding: 0.1rem 0.3rem;border-radius: 0.2rem;text-align: center;color: red;">每日歌曲推荐</div>
            </a-col>
            <a-col :span="24">
              <div class="creatorAvatar">
                <span>根据你的音乐口味，每天6:00生成</span>
              </div>
            </a-col>
            <a-col :span="24">
              <a-button-group>
                <a-button type="danger" size="small" @click="replaceMusicList"><a-icon type="caret-right" />全部播放 </a-button>
                <a-button type="danger" size="small"><a-icon type="plus" /> </a-button>
              </a-button-group>
              <a-button  size="small" class="collectionBtn" ><a-icon type="folder-add" />收藏全部 </a-button>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <a-col :span="24" style="text-align: left;">
        <a-table
            row-key="id"
            :columns="columns"
            :data-source="dailySongs"
            :pagination="false"
            :customRow="rowClick"
            :loading="loadingFlag"
        >
          <a slot="name" slot-scope="text">{{ text }}</a>
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {recommendSongs} from "@/api/api";
import {formatDate, getMusicTime} from '@/utils/util'
import {play,replaceMusicList} from "@/components/web/util/music";
import Vue from "vue";
import {CURRENT_PLAYING_MUSIC} from "@/store/mutation-types";
import {mapActions} from "vuex";
export default {
  name: "DailyRecommendation",
  dscription:"每日推荐歌单",
  components: {},
  data(){
    return {
      loadingFlag:false,
      dailySongs:[],
      columns: [
        {
          title: '',
          dataIndex: 'sort',
          key: 'sort',
          scopedSlots: {customRender: 'sort'},
          width: 60,
          customRender: function (text, record, index) {
            return index + 1
          }
        },
        {
          title: '音乐标题',
          dataIndex: 'musicName',
          key: 'musicName',
          scopedSlots: {customRender: 'musicName'},
          customRender: function (text, record) {
            return record.name;
          }
        },
        {
          title: '歌手',
          dataIndex: 'singer',
          key: 'singer',
          customRender: function (text, record) {
            return record.ar[0].name;
          }
        },
        {
          title: '专辑',
          dataIndex: 'album',
          key: 'album',
          ellipsis: true,
          customRender: function (text, record) {
            return record.al.name;
          }
        },
        {
          title: '时长',
          dataIndex: 'dt',
          key: 'dt',
          ellipsis: true,
          width: 100,
          customRender: function (text) {
            return getMusicTime(text / 1000);
          }
        },
      ],
    }
  },
  mounted() {
    this.getPlayListDetail();
  },
  methods:{
    ...mapActions(["addMusicToList","updateCurrentMusic"]),
    formatDate(time){
      return formatDate(time)
    },
    getPlayListDetail(){
      let _this = this;
      let params = {
        'cookie':this.$store.getters.cookie
      }
      // 获取每日登录歌曲
      recommendSongs(params).then(res=>{
        _this.dailySongs = res.data.dailySongs
      }).catch(error =>{
          this.$message.error("请先登录！")
        console.log('playlistDetail',typeof error)
        console.log(error)
      })
    },
    // 将当前歌单的音乐替换到正在播放列表
    replaceMusicList(){
      replaceMusicList(this.dailySongs);
    },
    rowClick(record){
      let _this = this;
      return {
        on:{
          dblclick:()=>{
            let musicInfo = {
              'id':record.id,
              'coverImgUrl':record.al.picUrl,
              'name':record.name,
              'author':record.ar[0].name,
              'duration':record.dt
            }
            // 添加到播放列表
            _this.addMusicToList(musicInfo);
            // 将数据设置到background.js 中
            _this.$bg.musicPlayer.musicList = _this.$store.getters.playList
            _this.$bg.musicPlayer.currentMusic = _this.$store.getters.currentPlayingMusic
            // 播放双击后的音乐
            play(_this.$bg.musicPlayer,1)
          }
        }
      }

    }
  }
}
</script>

<style scoped>
.playListDetailContainer{

}
.playListDetailCover{
  /*border: 1px red solid;*/
  height: 10rem;
}
.playListDetailCover>img{
  width: 9.8rem;
  height: 9.8rem;
  border-radius: 0.4rem;
}
.playListDetailInfo{
  /*border: 1px red solid;*/
  padding-left: 1rem;
  height: 6rem;
  text-align: left;
}
.creatorAvatar{
  margin-top: 0.5rem;
}
.creatorAvatar>img{
  border-radius: 50%;
  margin-right: 0.5rem;
  border: 1px #e0e0e0 solid;
}
.creatorAvatar>span{
  font-size: 12px;
}

.ant-btn-group {
  margin-top: 0.5rem;
  border-radius: 1rem;
  overflow: hidden;
}
.ant-btn-danger:hover{
  background: red;
}
.collectionBtn{
  border-radius: 1rem;
  margin-left: 0.5rem;
}
.collectionBtn:hover{
  color: gray;
  border: 1px #e0e0e0 solid ;
  background-color: #eaeaea;
}

::v-deep .ant-tabs-nav .ant-tabs-tab-active{
  color: black;
  font-weight: bold;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:active{
  color: black;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:hover{
  color: black;
}
::v-deep .ant-tabs-ink-bar{
  background-color: red ;
}
</style>
